<template>
  <div>
    <el-form ref="form" :model="form" :inline="true" style="text-align: left;">
      <el-form-item>
        <el-input v-model="form.filter.kwd" style="float: left;" placeholder="请输入关键字"></el-input>
      </el-form-item>
      <el-form-item>
        <el-select v-model="form.filter.fieldList[0].val" placeholder="日志类型" @change="onSubmit">
          <el-option label="登录日志" :value="0"></el-option>
          <el-option label="操作日志" :value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="dateRange"
          type="daterange" range-separator="至"
          :picker-options="pickerOptions"
          placeholder="选择时间范围"
          align="right">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click.native="onSubmit"><i class="el-icon-search"></i>查询</el-button>
        <el-popover
          ref="popover5"
          placement="top"
          v-model="visible2">
          <p>确定要删除一个月前的数据吗？</p>
          <div style="text-align: right; margin: 0">
            <el-button size="mini" type="text" @click="visible2 = false">取消</el-button>
            <el-button type="primary" size="mini" @click="clearOneMonth">确定</el-button>
          </div>
        </el-popover>

        <el-button v-popover:popover5 type="danger"><i class="el-icon-delete"></i>清除一个月前数据</el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-loading="loading"
      element-loading-text="数据加载中"
      :data="page.list"
      style="width:100%;"
      stripe
      @sort-change="onSubmit"
      border>
      <el-table-column
        inline-template
        fixed
        label="序号"
        width="80"
        align="center">
        <span>{{$index+1+((page.pageNumber-1)*page.pageSize)}}</span>
      </el-table-column>
      <el-table-column
        property="account"
        label="帐号"
        fixed
        sortable="custom"
        align="center">
      </el-table-column>
      <el-table-column
        property="username"
        label="姓名"
        sortable="custom"
        align="center">
      </el-table-column>
      <el-table-column
        property="ip"
        label="IP"
        sortable="custom"
        align="center">
      </el-table-column>
      <!--<el-table-column v-if="form.filter.fieldList[0].val==1"
                       sortable="custom"
                       property="menuname"
                       label="菜单"
                       align="center">
      </el-table-column>-->
      <el-table-column
        inline-template
        sortable="custom"
        label="访问时间"
        property="create_datetime"
        width="180"
        align="center">
        <span>{{new Date(row.create_datetime)|datetime}}</span>
      </el-table-column>
      <el-table-column
        inline-template
        label="操作" v-if="form.filter.fieldList[0].val==1"
        fixed="right"
        align="center"
        width="100">
        <span>
          <el-button type="text" @click.native="viewDialog(row.id)">详情</el-button>
        </span>
      </el-table-column>
    </el-table>

    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.pageNumber"
        :page-sizes="[10, 20, 30]"
        :page-size="10"
        layout="total, prev, pager, next, jumper"
        :total="page.totalRow">
      </el-pagination>
    </div>
    <!--弹出框-->
    <log-view-dialog v-bind:dialog-form-visible="dialogData.show" @closeDialog="closeDialog"></log-view-dialog>
  </div>
</template>
<script>
  import LogViewDialog from './view.dialog.vue'
  import http from '../../../api/http'
  import moment from 'moment'
  export default {
    data () {
      return {
        loading: true,
        form: {
          filter: {kwd: '', sort: {create_datetime: 'desc'}, fieldList: [{field: 'log_type', exp: '=', val: 0},{field:'create_datetime',type:'date',exp:'>=',val:null},{field:'create_datetime',type:'date',exp:'<=',val:null}]},
          pageNo: 1,
          pageSize: 10
        }, status: ["禁用", "激活"],
        id: null,
        dialogData: {show: false},
        page: {}, visible2: false,
        dialogFormVisible: false,
        dateRange:null,
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }]
        }
      }
    },
    computed: {},
    methods: {
      onSubmit (sortCol) {
        var vm = this;
          if(sortCol&&sortCol.prop!=undefined&&sortCol.prop!=''&&sortCol.prop!='undefined'){
              var sortJson='{"'+sortCol.prop+'":"'+(sortCol.order=='descending'?'desc':'asc')+'"}';
              console.log(sortJson);
            vm.form.filter.sort=JSON.parse(sortJson);
            vm.form.pageNo=1;
          }
        vm.loading = true;
        if(vm.dateRange!=null&&vm.dateRange!=undefined){
          vm.form.filter.fieldList[1].val=moment(vm.dateRange[0]).format('YYYY-MM-DD');
          vm.form.filter.fieldList[2].val=moment(vm.dateRange[1]).format('YYYY-MM-DD');
        }
        http.postData(vm,"/sys/log/page", {
          json: JSON.stringify(vm.form.filter),
          pageNo: vm.form.pageNo,
          pageSize: vm.form.pageSize
        },function (resp) {
          var ret = resp.body;
          if (ret.code == '111') {
            vm.page = ret.value;
          }else{
              vm.$message({type:'error',message:ret.msg});
          }
          vm.loading=false;
        });
      },
      viewDialog(id_) {
        this.$set(this.dialogData, 'show', true);
        if (id_ != undefined && typeof id_ == "string") {
          this.id = id_;
        } else {
          this.id = '';
        }
      },
      loadData(func) {
          var vm=this;
        if (this.id != undefined && this.id != '') {
          http.postData(vm,"/sys/log/detail/" + this.id, {},function (resp) {
            var ret = resp.body;
            if (ret.code === '111') {
              func(ret.value);
            } else {
              vm.$notify.error({title: '操作失败', message: ret.msg});
            }
          });
        } else {
          func({status: 1, name: ''});
        }
      },
      closeDialog() {
        this.$set(this.dialogData, 'show', false);
      },
      clearOneMonth () {
        var vm = this;
        vm.visible2 = false;
        http.postData(vm,"/sys/log/del/", {},function (resp) {
          var ret = resp.body;
          if (ret.code === '111') {
            vm.$notify({title: '删除提示', message: ret.msg, type: 'success'});
            vm.onSubmit();
          } else {
            vm.$message({type:'error', message: ret.msg});
          }
        });
      },
      handleSizeChange () {
        this.form.pageNo = 1
        this.onSubmit()
      },
      handleCurrentChange (val) {
        this.form.pageNo = val
        this.onSubmit()
      }
    },
    components: {
      LogViewDialog
    },
    created() {
      this.onSubmit();
    }
  }
</script>
<style>
</style>
